import React, { memo, useState, useCallback, useMemo, useContext } from 'react';
import PropTypes from 'prop-types';
import './Candidate.css';
import URI from 'urijs';
import dayjs from 'dayjs';
import { TrainContext } from './context';

const Channel = memo(function Channel(props) {
  const { name, desc, type } = props;

  const { departDate, trainNumber, departStation, arriveStation } = useContext(
    TrainContext
  );
  const src = useMemo(() => {
    return new URI('order.html')
      .setSearch('trainNumber', trainNumber)
      .setSearch('dStation', departStation)
      .setSearch('aStation', arriveStation)
      .setSearch('type', type)
      .setSearch('date', dayjs(departDate).format('YYYY-MM-DD'))
      .toString();
  }, [trainNumber, arriveStation, departStation, type, departDate]);
  return (
    <div className="channel">
      <div className="middle">
        <div className="name">{name}</div>
        <div className="desc">{desc}</div>
      </div>
      <a href={src} className="buy-wrapper">
        <div className="buy">买票</div>
      </a>
    </div>
  );
});

Channel.propTypes = {
  name: PropTypes.string.isRequired,
  desc: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
};

const Seat = memo(function Seat(props) {
  const {
    type,
    priceMsg,
    ticketsLeft,
    channels,
    expanded,
    toggle,
    idx,
  } = props;
  return (
    <li>
      <div className="bar" onClick={() => toggle(idx)}>
        <span className="seat">{type}</span>
        <span className="price">
          <i>¥</i>
          <span>{priceMsg}</span>
        </span>
        <span className="btn">{expanded ? '收起' : '预订'}</span>
        <span className="num">{ticketsLeft}</span>
      </div>
      <div
        className="channels"
        style={{ height: expanded ? channels.length * 54 + 'px' : 0 }}
      >
        {channels.map((channel) => {
          return <Channel key={channel.name} type={type} {...channel} />;
        })}
      </div>
    </li>
  );
});
Seat.propTypes = {
  type: PropTypes.string.isRequired,
  priceMsg: PropTypes.string.isRequired,
  ticketsLeft: PropTypes.string.isRequired,
  channels: PropTypes.array.isRequired,
  expanded: PropTypes.bool.isRequired,
  toggle: PropTypes.func.isRequired,
  idx: PropTypes.number.isRequired,
};

const Candidate = memo(function Candidate(props) {
  const { tickets } = props;
  //记录当前展开的索引值 -1默认都是收起状态 expandedIndex代表当前展开的索引值
  const [expandedIndex, setExpandedIndex] = useState(-1);

  const onToggle = useCallback(
    (idx) => {
      // 判断点击是不是当前的座次类型,如果是,将其设置索引,其余设置为-1
      setExpandedIndex(idx === expandedIndex ? -1 : idx);
    },
    [expandedIndex]
  );
  return (
    <div className="candidate">
      {/* 顶层 列表 */}
      <ul>
        {tickets.map((ticket, indx) => {
          return (
            <Seat
              idx={indx}
              toggle={onToggle}
              {...ticket}
              key={ticket.type}
              expanded={indx === expandedIndex}
            />
          );
        })}
      </ul>
    </div>
  );
});

Candidate.propTypes = {
  tickets: PropTypes.array.isRequired,
};

export default Candidate;
